template
<template>
  <view>
    <swiper :interval="3000" :current="current" :autoplay="true" @change="handleSwiperChange" :style="{height:height+'px'}">
      <swiper-item v-for="(item,index) in getImgList" :key="index">
        <image :src="item" style="height: 100%;width: 100%;" @click="toHome(index)"></image>
      </swiper-item>
    </swiper>
    <!-- 添加悬浮按钮 -->
    <button class="skip-button" @click="skipToLogin">跳过</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      getImgList: [
        require('@/static/images/guide/1.png'),
        require('@/static/images/guide/2.png'),
        require('@/static/images/guide/3.png'),
        require('@/static/images/guide/4.png'),
        require('@/static/images/guide/5.png'),
      ],
      height: '',
      current: ''
    }
  },
  methods: {
    handleSwiperChange(e) {
      // 当滑动到第三个swiper-item时跳转
      if (e.detail.current === 4) {
        uni.reLaunch({
          url: '/pages/login'
        })
      }
    },
    toHome(index) {
      if (index === 4) {
        uni.reLaunch({
          url: '/pages/login'
        })
      }
    },
    getHeight() {
      uni.getSystemInfo({
        success: res => {
          this.height = res.windowHeight; // 窗口高度
        }
      });
    },
    skipToLogin() {
      // 跳过引导页，直接进入登录页
      uni.reLaunch({
        url: '/pages/login'
      });
    }
  },
  onLoad() {
    //随机0-3的数字
    this.current = Math.floor(Math.random() * 4);
    this.getHeight();
  }
}
</script>

<style scoped>
.swiper {
  width: 100%;
}

.skip-button {
  position: fixed;
  right: 16px;
  width: 70px;
  height: 35px;
  line-height: 40px;
  top: 140px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 999;
}
</style>
